extends ../_layout

block active
  - sidebar_active = 'tour.html'

block content
  h3 Tour
    small The easiest way to show people how to use your website. 

  .container-fluid
    button.btn.btn-primary.mb-lg#start-tour Start Tour!
    .row
      .col-lg-6
        .panel.tour-step#tour-step-1(data-title='Step 1', data-content='This is the fisrt step', data-placement='right')
          .panel-heading About
          .panel-body
            p The easiest way to show people how to use your website. 
              | Duis ut nibh sapien. Duis et orci vitae nunc ultricies tempor a quis arcu. Aliquam condimentum enim a risus cursus blandit. 
              | Vivamus et urna magna. Nulla egestas faucibus tincidunt. Quisque eu ligula tellus. 
              | Proin euismod malesuada dui ac laoreet. Fusce vehicula, est id tincidunt convallis, risus purus vestibulum erat, hendrerit aliquam lacus tortor sit amet turpis. 
        
      .col-lg-6
        .panel.tour-step#tour-step-2(data-title='Step 2', data-content='This is the second step', data-placement='left')
          .panel-heading Configuration
          .panel-body
            p Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
              | In ac leo dui, vel pellentesque mauris. Integer cursus lectus vel eros placerat vitae faucibus leo dignissim. 
              | Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Ut consectetur ullamcorper purus a rutrum. 
              | Duis nec leo ipsum, a dignissim libero. Nulla mauris sem, hendrerit sed fringilla a, facilisis vitae eros. Vestibulum commodo augue tincidunt est dictum,
    .row
      .col-lg-12
        .panel.tour-step#tour-step-3(data-title='Last Step', data-content='This is the last step', data-placement='top')
          .panel-heading Setup your tour:
          .panel-body
            pre
              | // Instance the tour
              | var tour = new Tour({
              |   steps: [
              |   {
              |     element: "#my-element",
              |     title: "Title of my step",
              |     content: "Content of my step"
              |   },
              |   {
              |     element: "#my-other-element",
              |     title: "Title of my step",
              |     content: "Content of my step"
              |   }
              | ]});
              | // Initialize the tour
              | tour.init();
              | // Start the tour
              | tour.start();

block vendor_css
  // BOOTSTRAP TOUR
  link(rel='stylesheet', href='../vendor/bootstrap-tour/build/css/bootstrap-tour-standalone.css')
block vendor_js
  // BOOTSTRAP TOUR
  script(src='../vendor/bootstrap-tour/build/js/bootstrap-tour-standalone.js')
